<template>
	<view class="u-padding-20">
		<view class="shadow_con">
			<textarea v-model="content" placeholder="品牌型号、新旧程度、入手渠道..." placeholder-style="line-height:50rpx;" />
			<view class="t_list u-border-top u-flex u-row-between">
				<text>商品报价</text>
				<input v-model="price" type="text" placeholder="请输入商品价格">
			</view>
			
			<view class="t_list">
				<text>商品图片</text>
				<u-upload width="150rpx" height="150rpx" :file-list="fileList" :action="action" @on-success="successimg" @on-remove="deletePic" maxCount="6"></u-upload>
			</view>
			<view class="t_list">
				<text>商品类型</text>
				<view class="u-flex u-row-between u-flex-wrap" style="height:150rpx;">
					<view class="topic_con" v-for="(item,index) in topics">
						<view v-if="current == item.id" class="btn-view" @click="topic(item.id, item.name)">
							<text># {{item.name}} #</text>
						</view>
						<view v-else class="btn-view1" @click="topic(item.id, item.name)">
							<text># {{item.name}} #</text>
						</view>
					</view>
				</view>
				
				
			</view>
		</view>
		<button type="default" class="btn_con" @click="tosubmit">发布上架</button>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getTopic,
		createLattice
	} from "@/service/shareService.js";
	export default {
		data () {
			return {
				topics: [], 
				current:0,  //类型ID
				action:'https://admin.gslhzhwy.com/api/upload/file',
				images:[],
				fileList:[],
				content:'',
				price:'',
			}
		},
		onLoad() {
			getTopic({
				page: this.page,
				limit: this.limit
			}).then(this.getTopic);
		},
		methods:{
			getTopic(e) {
				if (e.code == 200) {
					this.topics=e.result
				}
			},
			topic(tid, name) {
				this.current = tid;
			},
			successimg:function(e){
				if (e.code == 1) {
					this.images.push(e.data.url);
				}
			},
			// 删除图片
			deletePic(event) {
				this.images.splice(event.index,1);
			},
			tosubmit:function(){
				createLattice({
					topic: this.current,
					content: this.content,
					images:this.images,
					price:this.price
				}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: '提交成功！',
							type: 'default', 
							icon: false
						})
						setTimeout(function(){
							uni.navigateBack();
						},2000)
					}else{
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error', 
							icon: false
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.shadow_con{
		padding:20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 15rpx #ddd;
	}
	textarea{
		width:97%;
		padding:10rpx;
		line-height: 50rpx;
		height:150rpx;
	}
	.t_list{
		padding:20rpx 0;
	}
	.t_list input{
		display: inline-block;
		width:75%;
		text-align: right;
		vertical-align: middle;
	}
	.topic_con{
		width:31%;
		text-align: center; 
		font-size: 24rpx;
	}
	.btn-view {
		color: #FFFFFF;
		background-color: #0c838b;
		border-radius: 30rpx;
		padding: 10rpx 15rpx;
	}
	
	.btn-view1 {
		color: #666666;
		border: #666666 1rpx solid;
		border-radius: 30rpx;
		padding: 10rpx 15rpx;
	}
	.btn_con{
		width:90%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff !important;
		margin:70rpx auto 20rpx;
	}
	.pre-box {
		margin-top:20rpx;
	}
	
	.pre-item {
		// flex: 1;
		display: inline-block;
		border-radius: 10rpx;
		width:200rpx;
		height: 200rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
		margin-left:10rpx;
	}
	
	.pre-item-image {
		width: 100%;
		height: 100%;
	}
</style>
